// Pinia入门案例-counter

// Store 仓库 ==> Vuex的模块（modules）

// 1. 定义Store
// 2. 定义state
// 3. 定义修改state的函数

import {
  defineStore
} from 'pinia'
import {
  computed,
  ref
} from 'vue'

// 第一个参数：Store的名称
// 第二个参数：组合式API的入口函数
// 第三个参数：配置项
// 返回值：是获取Store实例的工厂函数
//    Tips: 这个工厂函数的名称一般要符合规范（认为约定的）：useXxxStore，Xxx - Store名称
export const useCounterStore = defineStore(
  'counter',
  () => {
    // 这就是一个状态，响应式的
    const count = ref(100)

    // 测试 state
    const user = ref({
      name: 'zs',
      age: 18
    })

    // Pinia中的计算属性就是 computed
    const doubleCount = computed(() => {
      return count.value * 2
    })

    // 递增函数
    const increment = () => {
      count.value++
    }

    // 递减函数
    const decrement = () => {
      count.value--
    }

    // 类似于 setup 函数，一定要return，外界才能访问
    return {
      count,
      doubleCount,
      increment,
      decrement,
      user
    }
  },
  // 给Store开始自动持久化功能（持久化所有state）
  // {
  //   persist: true,
  // }
  // 支持只持久化部分state
  {
    persist: {
      // 指定需要存储的state列表（state的访问路径）
      paths: ['count', 'user.name'],
    },
  }
)